<template>
  <div class="vi-page">
    <el-scrollbar class="menu">
      <Menu :index="3" />
    </el-scrollbar>
    <el-scrollbar class="colL">
      <!-- 产品类型 -->
      <div class="section">
        <div class="title-bar">
          <div class="title">产品类型</div>
          <el-button
            type="primary"
            size="small"
            icon="Refresh"
            :style="{ marginLeft: 'auto' }"
            @click="handleTry"
            >试一试</el-button
          >
        </div>
        <el-input v-model="form.cplx" :style="{ width: '100%' }"></el-input>
      </div>

      <!-- 创意灵感 -->
      <div class="section">
        <div class="title-bar">
          <div class="title">创意灵感</div>
        </div>
        <el-input type="textarea" v-model="form.cylg" :rows="3" />
      </div>

      <!-- 画面质感 -->
      <div class="section">
        <div class="title-bar">
          <div class="title">画面质感</div>
        </div>
        <el-tabs v-model="activeName" :style="{ marginTop: '-5px' }">
          <el-tab-pane label="通用" name="first" class="frame">
            <div
              class="frameItem"
              :class="{ active: tab1 === item }"
              v-for="item in [
                '柔光',
                '木板线条',
                '霓虹灯光',
                '大师之作',
                '蒸汽朋克',
                '卡通',
                '国风',
              ]"
              :key="item"
              @click="tab1 = item"
            >
              {{ item }}
            </div>
          </el-tab-pane>
          <el-tab-pane label="镜头视角" name="second" class="frame">
            <div
              class="frameItem"
              :class="{ active: tab2 === item }"
              v-for="item in ['超广角', '中景', '远景', '长焦镜头', '暖色']"
              :key="item"
              @click="tab2 = item"
            >
              {{ item }}
            </div>
          </el-tab-pane>
          <el-tab-pane label="画面类型" name="third" class="frame">
            <div
              class="frameItem"
              :class="{ active: tab3 === item }"
              v-for="item in [
                '科幻',
                '抽象',
                '复古',
                '洛可可',
                '现实',
                '立绘',
                '拼贴',
              ]"
              :key="item"
              @click="tab3 = item"
            >
              {{ item }}
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="selectContent">
          <div style="flex: 0 0 50px">已选择</div>
          <div class="selectList">
            <div class="selectItem" v-for="item in selectList" :key="item">
              {{ item }}
            </div>
          </div>
        </div>
      </div>

      <!-- 上传参考图 -->
      <div class="section" :style="{ marginTop: '6px' }">
        <div class="title-bar">
          <div class="title">上传参考图</div>
        </div>
        <div class="upload">
          <el-upload drag action="" multiple>
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              点击或拖拽图片上传，支持PNG、JPG，20M以内<br />或从 我的作品 或
              模板库 中选择
            </div>
          </el-upload>
        </div>
      </div>

      <!-- 包装材质 -->
      <div class="section">
        <div class="title-bar">
          <div class="title">包装材质</div>
        </div>
        <div class="cai-zhi">
          <div
            class="item-box"
            :class="{ active: caizhi === '牛皮纸' }"
            @click="caizhi = '牛皮纸'"
          >
            <img
              class="image"
              src="../../assets/img/material-niupi.png"
              alt=""
            />
            <div class="text">牛皮纸</div>
          </div>
          <div
            class="item-box"
            :class="{ active: caizhi === '玻璃' }"
            @click="caizhi = '玻璃'"
          >
            <img
              class="image"
              src="../../assets/img/material-boli.png"
              alt=""
            />
            <div class="text">玻璃</div>
          </div>
          <div
            class="item-box"
            :class="{ active: caizhi === '塑料' }"
            @click="caizhi = '塑料'"
          >
            <img
              class="image"
              src="../../assets/img/material-suliao.png"
              alt=""
            />
            <div class="text">塑料</div>
          </div>
          <div
            class="item-box"
            :class="{ active: caizhi === '木板' }"
            @click="caizhi = '木板'"
          >
            <img
              class="image"
              src="../../assets/img/material-muban.png"
              alt=""
            />
            <div class="text">木板</div>
          </div>
          <div
            class="item-box"
            :class="{ active: caizhi === '铜版纸' }"
            @click="caizhi = '铜版纸'"
          >
            <img
              class="image"
              src="../../assets/img/material-tongban.png"
              alt=""
            />
            <div class="text">铜版纸</div>
          </div>
        </div>
      </div>

      <!-- 盒形 -->
      <div class="section">
        <div class="title-bar">
          <div class="title">盒型</div>
        </div>
        <el-tabs @tab-click="handleTabClick" :style="{ marginTop: '-5px' }">
          <el-tab-pane label="纸盒">
            <div class="shapeList">
              <div
                class="shapeItem"
                :class="{ active: hx1 === '双插盒' }"
                @click="hx1 = '双插盒'"
              >
                <img
                  src="../../assets/vi/tab-1-1-on.png"
                  v-if="hx1 === '双插盒'"
                  alt=""
                  class="img"
                />
                <img
                  src="../../assets/vi/tab-1-1.png"
                  alt=""
                  class="img"
                  v-else
                />
                <div class="name">双插盒</div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="异性盒">
            <div class="shapeList">
              <div
                class="shapeItem"
                :class="{ active: hx2 === '包装箱' }"
                @click="hx2 = '包装箱'"
              >
                <img
                  src="../../assets/vi/tab-2-1-on.png"
                  alt=""
                  class="img"
                  v-if="hx2 === '包装箱'"
                />
                <img
                  src="../../assets/vi/tab-2-1.png"
                  alt=""
                  class="img"
                  v-else
                />
                <div class="name">包装箱</div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="袋子">
            <div class="shapeList">
              <div
                class="shapeItem"
                :class="{ active: hx3 === '自立袋' }"
                @click="hx3 = '自立袋'"
              >
                <img
                  src="../../assets/vi/tab-3-1-on.png"
                  alt=""
                  class="img"
                  v-if="hx3 === '自立袋'"
                />
                <img
                  src="../../assets/vi/tab-3-1.png"
                  alt=""
                  class="img"
                  v-else
                />
                <div class="name">自立袋</div>
              </div>
              <div
                class="shapeItem"
                :class="{ active: hx3 === '八边封袋' }"
                @click="hx3 = '八边封袋'"
              >
                <img
                  src="../../assets/vi/tab-3-2-on.png"
                  alt=""
                  class="img"
                  v-if="hx3 === '八边封袋'"
                />
                <img
                  src="../../assets/vi/tab-3-2.png"
                  alt=""
                  class="img"
                  v-else
                />
                <div class="name">八边封袋</div>
              </div>
              <div
                class="shapeItem"
                :class="{ active: hx3 === '手提纸袋' }"
                @click="hx3 = '手提纸袋'"
              >
                <img
                  src="../../assets/vi/tab-3-3-on.png"
                  alt=""
                  class="img"
                  v-if="hx3 === '手提纸袋'"
                />
                <img
                  src="../../assets/vi/tab-3-3.png"
                  alt=""
                  class="img"
                  v-else
                />
                <div class="name">手提纸袋</div>
              </div>
              <div
                class="shapeItem"
                :class="{ active: hx3 === '帆布袋' }"
                @click="hx3 = '帆布袋'"
              >
                <img
                  src="../../assets/vi/tab-3-4-on.png"
                  alt=""
                  class="img"
                  v-if="hx3 === '帆布袋'"
                />
                <img
                  src="../../assets/vi/tab-3-4.png"
                  alt=""
                  class="img"
                  v-else
                />
                <div class="name">帆布袋</div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="瓶罐">
            <div class="shapeList">
              <div
                class="shapeItem"
                :class="{ active: hx4 === '金属罐' }"
                @click="hx4 = '金属罐'"
              >
                <img
                  src="../../assets/vi/tab-4-1-on.png"
                  alt=""
                  class="img"
                  v-if="hx4 === '金属罐'"
                />
                <img
                  src="../../assets/vi/tab-4-1.png"
                  alt=""
                  class="img"
                  v-else
                />
                <div class="name">金属罐</div>
              </div>
              <div
                class="shapeItem"
                :class="{ active: hx4 === '塑料罐' }"
                @click="hx4 = '塑料罐'"
              >
                <img
                  src="../../assets/vi/tab-4-2-on.png"
                  alt=""
                  class="img"
                  v-if="hx4 === '塑料罐'"
                />
                <img
                  src="../../assets/vi/tab-4-2.png"
                  alt=""
                  class="img"
                  v-else
                />
                <div class="name">塑料罐</div>
              </div>
              <div
                class="shapeItem"
                :class="{ active: hx4 === '纸罐' }"
                @click="hx4 = '纸罐'"
              >
                <img
                  src="../../assets/vi/tab-4-3-on.png"
                  alt=""
                  class="img"
                  v-if="hx4 === '纸罐'"
                />
                <img
                  src="../../assets/vi/tab-4-3.png"
                  alt=""
                  class="img"
                  v-else
                />
                <div class="name">纸罐</div>
              </div>
              <div
                class="shapeItem"
                :class="{ active: hx4 === '玻璃罐' }"
                @click="hx4 = '玻璃罐'"
              >
                <img
                  src="../../assets/vi/tab-4-4-on.png"
                  alt=""
                  class="img"
                  v-if="hx4 === '玻璃罐'"
                />
                <img
                  src="../../assets/vi/tab-4-4.png"
                  alt=""
                  class="img"
                  v-else
                />
                <div class="name">玻璃罐</div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="碗桶">
            <div class="shapeList">
              <div
                class="shapeItem"
                :class="{ active: hx5 === '桶' }"
                @click="hx5 = '桶'"
              >
                <img
                  src="../../assets/vi/tab-5-1-on.png"
                  alt=""
                  class="img"
                  v-if="hx5 === '桶'"
                />
                <img
                  src="../../assets/vi/tab-5-1.png"
                  alt=""
                  class="img"
                  v-else
                />
                <div class="name">桶</div>
              </div>
              <div
                class="shapeItem"
                :class="{ active: hx5 === '纸杯' }"
                @click="hx5 = '纸杯'"
              >
                <img
                  src="../../assets/vi/tab-5-2-on.png"
                  alt=""
                  class="img"
                  v-if="hx5 === '纸杯'"
                />
                <img
                  src="../../assets/vi/tab-5-2.png"
                  alt=""
                  class="img"
                  v-else
                />
                <div class="name">纸杯</div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <div class="btn-panel">
        <el-button type="primary" :loading="loading" @click="handleCreate"
          >生成</el-button
        >
      </div>
    </el-scrollbar>
    <div class="colR">
      <template v-if="isPreview">
        <div class="preview" v-if="loading">
          <el-skeleton animated />
        </div>
        <div class="preview" v-else>
          <div
            class="imageItem"
            v-for="(item, index) in imgList"
            :key="item"
            @mouseover="mouseOver(item)"
            @mouseleave="mouseLeave"
          >
            <img
              v-if="currentPic == item"
              class="save"
              src="../../assets/img/29.2.png"
              alt=""
            />
            <img :src="item" alt="" class="image" />
            <img
              v-if="currentPic == item"
              class="download"
              src="../../assets/img/30.1.png"
              alt=""
            />
          </div>
        </div>
      </template>
    </div>
    <div class="bookmark">
      <div class="title">收藏夹</div>
      <el-scrollbar class="scrollbar">
        <div class="rows">
          <img
            src="../../assets/img/sowing/5.jpg"
            class="image"
            :class="{ active: activeIndex === 3 }"
            alt=""
            @click="activeIndex = 3"
          />
          <img
            src="../../assets/img/sowing/1.png"
            class="image"
            :class="{ active: activeIndex === 4 }"
            alt=""
            @click="activeIndex = 4"
          />
          <img
            src="../../assets/img/sowing/6.png"
            class="image"
            :class="{ active: activeIndex === 5 }"
            alt=""
            @click="activeIndex = 5"
          />

          <img
            src="../../assets/vi/1.png"
            class="image"
            :class="{ active: activeIndex === 6 }"
            alt=""
            @click="activeIndex = 6"
          />
          <img
            src="../../assets/vi/2.png"
            class="image"
            :class="{ active: activeIndex === 7 }"
            alt=""
            @click="activeIndex = 7"
          />
          <img
            src="../../assets/vi/3.png"
            class="image"
            :class="{ active: activeIndex === 8 }"
            alt=""
            @click="activeIndex = 8"
          />
          <img
            src="../../assets/vi/4.png"
            class="image"
            :class="{ active: activeIndex === 9 }"
            alt=""
            @click="activeIndex = 9"
          />
          <img
            src="../../assets/vi/5.png"
            class="image"
            :class="{ active: activeIndex === 10 }"
            alt=""
            @click="activeIndex = 10"
          />
          <img
            src="../../assets/vi/6.png"
            class="image"
            :class="{ active: activeIndex === 11 }"
            alt=""
            @click="activeIndex = 11"
          />
          <img
            src="../../assets/vi/7.png"
            class="image"
            :class="{ active: activeIndex === 12 }"
            alt=""
            @click="activeIndex = 12"
          />
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { Refresh } from "@element-plus/icons-vue";
import Menu from "./menu.vue";
import img1 from "../../assets/img/sowing/1.png";
import img2 from "../../assets/img/sowing/2.png";
import img3 from "../../assets/img/sowing/3.png";
import img4 from "../../assets/img/sowing/4.png";
import img5 from "../../assets/img/sowing/5.jpg";
import img6 from "../../assets/img/sowing/6.png";
import niupi from "../../assets/img/material-niupi.png";
import boli from "../../assets/img/material-boli.png";
import suliao from "../../assets/img/material-suliao.png";
import muban from "../../assets/img/material-muban.png";
import tongban from "../../assets/img/material-tongban.png";
const form = reactive({
  cplx: "",
  cylg: "",
  hmzg: "",
  sjfg: 1,
});

const boxShapeNames = ref([
  { 0: ["双插盒", "包装箱"] },
  { 1: ["自立袋", "八边封袋", "手提纸袋", "帆布袋"] },
  { 2: ["金属罐", "塑料罐", "纸罐", "玻璃罐"] },
  { 3: ["纸杯", "桶"] },
]);

const firstTab = ref([
  "柔光",
  "木板线条",
  "霓虹灯光",
  "大师之作",
  "蒸汽朋克",
  "卡通",
  "国风",
]);
const secondTab = ref(["超广角", "中景", "远景", "长焦镜头", "暖色"]);
const thirdTab = ref([
  "科幻",
  "抽象",
  "复古",
  "洛可可",
  "现实",
  "立绘",
  "拼贴",
]);

const caiZhi = ref([
  { label: "牛皮纸", url: niupi },
  { label: "玻璃", url: boli },
  { label: "塑料", url: suliao },
  { label: "木板", url: muban },
  { label: "铜版纸", url: tongban },
]);

const currentCZ = ref("");

const imgList = ref([img1, img2, img3, img4]);
const imgList2 = ref([img2, img3, img4, img5, img1, img6]);

const activeIndex = ref(3);
const activeBookType = ref("");
const tab1 = ref("");
const tab2 = ref("");
const tab3 = ref("");
const caizhi = ref("");
const loading = ref(false);
const isPreview = ref(false);

const hx1 = ref("");
const hx2 = ref("");
const hx3 = ref("");
const hx4 = ref("");
const hx5 = ref("");

const currentPic = ref("");
const activeName = ref("first");

function handleTabClick() {
  console.log("activBookType", activeBookType);
  activeBookType.value = "";
}

function mouseOver(url) {
  currentPic.value = url;
}
function mouseLeave() {
  currentPic.value = "";
}

function handleTry() {
  form.cplx = "酸奶";
  form.cylg = "梵高系列酸奶盒，有创意、不落俗套，融入自然元素和印象派风格";
}

function handleCreate() {
  loading.value = true;
  isPreview.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 3000);
}
</script>
<style lang="scss" scoped>
.vi-page {
  clear: both;
  overflow: hidden;
  height: 100%;
  line-height: 1;
  display: flex;
  font-size: 14px;

  .menu {
    margin-right: 20px;
    background-color: #fff;
  }

  .colL {
    width: 440px;
    height: calc(100vh - 100px);
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    margin: 20px 0;

    .section {
      clear: both;
      overflow: hidden;
      padding: 0 20px 10px;

      .title-bar {
        height: 44px;
        display: flex;
        align-items: center;

        .title {
          font-weight: bold;
        }

        .btn {
          margin-left: auto;
          cursor: pointer;
        }
      }

      .radio-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .item-box {
          width: calc(50% - 10px);
        }
      }

      .upload {
        .el-upload__text {
          font-size: 12px;
          line-height: 1.6;
          color: #999;
        }
      }

      .cai-zhi {
        display: flex;
        flex-wrap: wrap;
        padding: 2px 0 10px;

        .activeCZ {
          border: 1px solid #48a0ff;
        }

        .item-box {
          width: calc(100% / 5);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          cursor: pointer;

          .image {
            width: 50px;
            height: 50px;
            border: solid 2px transparent;
            border-radius: 50%;
          }

          .text {
            line-height: 24px;
            margin-top: 2px;
          }

          &.active {
            .image {
              border-color: #2171fe;
              background-color: #2171fe;
            }

            .text {
              color: #2171fe;
            }
          }
        }
      }

      .shapeList {
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;

        .shapeItem {
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;

          .img {
            height: 48px;
          }

          .name {
            text-align: center;
            color: #999;
            margin-top: 8px;
          }

          &.active {
            .name {
              color: #48a0ff;
            }
          }
        }
      }

      .frame {
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;

        .frameItem {
          border-radius: 30px;
          background: #eee;
          text-align: center;
          padding: 10px 5px;
          cursor: pointer;

          &.active {
            background-color: #2171fe;
            color: #fff;
          }
        }

        .activeTabItem {
          border: 1px solid #48a0ff;
        }
      }

      .selectContent {
        display: flex;
        align-items: center;
        margin: 10px 0px;
      }

      .selectList {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;

        .selectItem {
          border-radius: 10px;
          color: #fff;
          background: #48a0ff;
          padding: 5px;
        }
      }
    }

    .btn-panel {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 15px;
    }

    .btn-panel {
      height: 80px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 0 20px;
    }
  }

  .colR {
    flex: 1;
    width: 1%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    margin: 20px 0 20px 20px;
    border-radius: 12px;
    overflow: hidden;

    .preview {
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
      justify-content: center;
      align-items: center;
      min-width: 600px;
      max-width: 780px;

      .imageItem {
        position: relative;
        width: calc(43% - 10px);
        margin: 10px;
        display: flex;

        .download {
          position: absolute;
          width: 30px;
          height: 30px;
          right: 20px;
          top: 20px;
          cursor: pointer;
        }

        .save {
          position: absolute;
          width: 30px;
          height: 30px;
          left: 20px;
          top: 20px;
          cursor: pointer;
        }
      }

      .image {
        width: 100%;
        background-color: #eee;
        object-fit: cover;
        border-radius: 10px;
      }
    }
  }

  .bookmark {
    width: 140px;
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    margin: 20px;

    .title {
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      border-bottom: solid 1px #eee;
    }

    .scrollbar {
      height: calc(100vh - 149px);
    }

    .rows {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 12px;

      .image {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border: solid 2px #fff;
        margin-top: 12px;
        cursor: pointer;

        &.active {
          border-color: #2171fe;
        }
      }
    }
  }
}
</style>
